<template>
  <div>
    <div
      style="
        background: #fff;
        padding: 20px;
        min-height: 80vh;
        max-width: 1200px;
        border-radius: 8px;
        margin-left: 20%;
      "
    >
      <div v-if="userInfo.type === '1'">
        <el-tabs v-model="activeName">
          <el-tab-pane label="个人信息" name="first"></el-tab-pane>
          <el-tab-pane label="我的投递" name="second"></el-tab-pane>
        </el-tabs>
        <div v-if="activeName === 'first'">
          <el-divider content-position="left">
            <h4>基础信息</h4>
          </el-divider>
          <el-form
            ref="form"
            label-width="80px"
            label-position="left"
            :model="userInfo"
            :rules="rules1"
            style="margin: auto"
          >
            <el-form-item label="用户名" prop="username">
              <el-input
                size="mini"
                v-model="userInfo.username"
                auto-complete="off"
                placeholder="请输入用户名"
              ></el-input>
            </el-form-item>
            <el-form-item label="密码" prop="password">
              <el-input
                id="password"
                size="mini"
                type="password"
                v-model="userInfo.password"
                auto-complete="off"
                placeholder="请输入密码"
              ></el-input>
            </el-form-item>
            <el-form-item label="头像" prop="avator">
              <div style="display: flex; align-item: center; gap: 20px">
                <div v-if="userInfo.avator" class="img-blocks">
                  <div style="position: relative">
                    <img :src="userInfo.avator" style="width: 80px" />
                  </div>
                </div>
                <el-upload
                  class="avatar-uploader"
                  :action="'/upload'"
                  :show-file-list="false"
                  :on-success="handleAvatarSuccess"
                >
                  <el-button type="danger" size="mini">换头像</el-button>
                </el-upload>
              </div>
            </el-form-item>
            <el-form-item label="学历" prop="xueli">
              <el-select
                style="width: 100%"
                size="mini"
                v-model="userInfo.xueli"
                placeholder="请选择"
              >
                <el-option
                  v-for="item in xuelis"
                  :key="item"
                  :label="item"
                  :value="item"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="工作经验" prop="experience">
              <el-select
                style="width: 100%"
                size="mini"
                v-model="userInfo.experience"
                placeholder="请选择"
              >
                <el-option
                  v-for="(item, index) in experiences"
                  :key="index"
                  :label="item"
                  :value="item"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="专业" prop="subject">
              <el-input
                size="mini"
                v-model="userInfo.subject"
                auto-complete="off"
                placeholder="请输入专业"
              ></el-input>
            </el-form-item>
            <el-form-item label="电话" prop="telephone">
              <el-input
                size="mini"
                v-model="userInfo.telephone"
                auto-complete="off"
                placeholder="请输入电话"
              ></el-input>
            </el-form-item>
          </el-form>
          <el-divider content-position="left">
            <h4>个人优势</h4>
          </el-divider>
          <el-input
            type="textarea"
            style="margin-bottom: 20px"
            :autosize="{ minRows: 5, maxRows: 10 }"
            placeholder="请填写个人优势"
            v-model="userInfo.advantage"
          >
          </el-input>
          <el-divider content-position="left">
            <h4>期望职位</h4>
          </el-divider>
          <div class="flex-center" v-if="qiwang" style="margin-bottom: 40px">
            <el-input
              size="mini"
              style="width: 300px"
              v-model="qiwang.job"
              placeholder="请输入期望职位"
            ></el-input>
            <el-select
              style="width: 300px"
              size="mini"
              v-model="qiwang.salary"
              placeholder="请选择期望薪资"
            >
              <el-option
                v-for="(item, index) in xinzis"
                :key="index"
                :label="item"
                :value="item"
              >
              </el-option>
            </el-select>
            <el-select
              style="width: 300px"
              size="mini"
              v-model="qiwang.location"
              placeholder="请选择期望工作地点"
            >
              <el-option
                v-for="(item, index) in locations"
                :key="index"
                :label="item"
                :value="item"
              >
              </el-option>
            </el-select>
          </div>
          <el-divider content-position="left">
            <h4>教育经历</h4>
          </el-divider>
          <div
            class="flex-center"
            style="margin-bottom: 10px; margin-bottom: 40px"
            v-for="(item, index) in eduDetail"
            :key="index"
          >
            <el-input
              size="mini"
              style="width: 300px"
              v-model="item.time"
              placeholder="时间范围"
            ></el-input>
            <el-input
              size="mini"
              style="width: 300px"
              v-model="item.name"
              placeholder="学校名称"
            ></el-input>
            <el-button
              @click="deleteEdu(index)"
              size="mini"
              type="danger"
              icon="el-icon-delete"
              circle
            ></el-button>
            <el-button
              @click="addEdu(index)"
              size="mini"
              type="primary"
              icon="el-icon-plus"
              circle
            ></el-button>
          </div>
          <el-divider content-position="left">
            <h4>工作经历</h4>
          </el-divider>
          <div
            class="flex-center"
            style="margin-bottom: 10px"
            v-for="(e, index) in experienceDetail"
            :key="index"
          >
            <el-input
              size="mini"
              style="width: 300px"
              v-model="e.time"
              placeholder="时间范围"
            ></el-input>
            <el-input
              size="mini"
              style="width: 300px"
              v-model="e.name"
              placeholder="工作单位"
            ></el-input>
            <el-button
              @click="deleteWork(index)"
              size="mini"
              type="danger"
              icon="el-icon-delete"
              circle
            ></el-button>
            <el-button
              @click="addWork(index)"
              size="mini"
              type="primary"
              icon="el-icon-plus"
              circle
            ></el-button>
          </div>
          <div style="display: flex">
            <el-button
              size="mini"
              style="margin: auto; margin-top: 30px"
              v-if="userInfo.username"
              @click="update"
              type="primary"
              >修改</el-button
            >
          </div>
        </div>
        <div v-if="activeName === 'second'">
          <h3 v-if="myTds.length === 0">您暂未投递过简历</h3>
          <div v-if="myTds.length" class="jobs">
            <div class="each-job" v-for="item in myTds">
              <div class="flex-between" style="padding: 10px 20px 10px 20px;">
                <div>{{item.jobName}}</div>
                <div style="color: red;">{{item.salary}}</div>
              </div>
              <div class="tags flex-center" style="padding: 0 20px 10px 20px">
                <div class="tag" v-for="tag in item.tags">{{tag}}</div>  
              </div>
              <div class="company flex-between">
                <div>{{item.publisherInfo.companyName}}</div>
                <div v-if="item.examine === 'true'">已通过</div>
                <div v-if="item.examine === 'false'">未通过</div>
                <div v-if="item.examine === ''">未查看</div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div v-if="userInfo.type === '2'">
        <el-form
          ref="form"
          label-width="80px"
          label-position="left"
          :model="userInfo"
          :rules="rules2"
          style="margin: auto"
        >
          <el-form-item label="用户名" prop="username">
            <el-input
              size="mini"
              v-model="userInfo.username"
              auto-complete="off"
              placeholder="请输入用户名"
            ></el-input>
          </el-form-item>
          <el-form-item label="密码" prop="password">
            <el-input
              id="password"
              size="mini"
              type="password"
              v-model="userInfo.password"
              auto-complete="off"
              placeholder="请输入密码"
            ></el-input>
          </el-form-item>
          <el-form-item label="头像" prop="avator">
            <div v-if="userInfo.avator" class="img-blocks">
              <div style="position: relative">
                <img :src="userInfo.avator" style="width: 80px" />
              </div>
            </div>
            <el-upload
              class="avatar-uploader"
              :action="'/upload'"
              :show-file-list="false"
              :on-success="handleAvatarSuccess"
            >
              <el-button>换头像</el-button>
            </el-upload>
          </el-form-item>
          <el-form-item label="公司名称" prop="companyName">
            <el-input
              size="mini"
              v-model="userInfo.companyName"
              auto-complete="off"
              placeholder="请输入公司名称"
            ></el-input>
          </el-form-item>
          <el-form-item label="你的职位" prop="jobName">
            <el-input
              size="mini"
              v-model="userInfo.jobName"
              auto-complete="off"
              placeholder="请输入职位名称"
            ></el-input>
          </el-form-item>
        </el-form>
        <div style="display: flex">
          <el-button
            size="mini"
            style="margin: auto; margin-top: 30px"
            v-if="userInfo.username"
            @click="update"
            type="primary"
            >修改</el-button
          >
        </div>
      </div>
      <div style="height: 1px; width: 100%; margin-top: 50px"></div>
    </div>
  </div>
</template>

<script>
import {
  updateUser,
  getUserInfo,
  getXuelis,
  getJobSalary,
  getJobExperience,
  getJobLocation,
  getJobById
} from "../service";
export default {
  data() {
    return {
      qiwang: {
        job: "",
        salary: "",
        location: "",
      },
      activeName: "first",
      eduDetail: [],
      experienceDetail: [],
      userInfo: {
        username: "",
        password: "",
        type: "1",
        avator: "",
        xueli: "",
        subject: "",
        telephone: "",
        advantage: "",
      },
      rules1: {
        username: [
          { required: true, message: "用户名不能为空", trigger: "blur" },
        ],
        password: [
          { required: true, message: "密码不能为空", trigger: "blur" },
        ],
        xueli: [{ required: true, message: "请选择学历", trigger: "blur" }],
        experience: [
          { required: true, message: "请选择工作经验", trigger: "blur" },
        ],
        subject: [{ required: true, message: "请输入专业", trigger: "blur" }],
        telephone: [{ required: true, message: "请输入电话", trigger: "blur" }],
        avator: [{ required: true, message: "请上传头像", trigger: "blur" }],
      },
      rules2: {
        username: [
          { required: true, message: "用户名不能为空", trigger: "blur" },
        ],
        password: [
          { required: true, message: "密码不能为空", trigger: "blur" },
        ],
        avator: [{ required: true, message: "请上传头像", trigger: "blur" }],
        companyName: [{ required: true, message: "请输入", trigger: "blur" }],
        jobName: [{ required: true, message: "请输入", trigger: "blur" }],
      },
      xuelis: [],
      experiences: [],
      xinzis: [],
      locations: [],
      myTds: []
    };
  },
  created() {
    getXuelis().then((res) => {
      this.xuelis = res.data || [];
    });
    getJobSalary().then((res) => {
      this.xinzis = res.data || [];
    });
    getJobExperience().then((res) => {
      this.experiences = res.data || [];
    });
    getJobLocation().then((res) => {
      this.locations = res.data || [];
    });
    if (localStorage.getItem("meiyaWebInfo")) {
      this.userInfo = JSON.parse(localStorage.getItem("meiyaWebInfo"));
      this.userType = this.userInfo.type;
      getUserInfo(this.userInfo._id).then(async (res) => {
        this.userInfo = res.data;
        if (this.userInfo.qiwang) {
          this.qiwang = JSON.parse(this.userInfo.qiwang);
        } else {
          this.qiwang = {
            job: "",
            salary: "",
          };
        }

        if (this.userInfo.eduDetail) {
          this.eduDetail = JSON.parse(this.userInfo.eduDetail);
        } else {
          this.eduDetail = [
            {
              time: "",
              name: "",
            },
          ];
        }
        if (this.userInfo.experienceDetail) {
          this.experienceDetail = JSON.parse(this.userInfo.experienceDetail);
        } else {
          this.experienceDetail = [
            {
              time: "",
              name: "",
            },
          ];
        }

        // 处理我的投递
        let myTdIds = []
        if (this.userInfo.myTdIds) {
          myTdIds = JSON.parse(this.userInfo.myTdIds)
        }
        this.myTds = myTdIds
      });
    }
  },
  methods: {
    handleAvatarSuccess(result) {
      this.userInfo.avator = result.url;
    },
    update() {
      this.$refs["form"].validate((valid) => {
        let params = JSON.parse(JSON.stringify(this.userInfo));
        params.qiwang = JSON.stringify(this.qiwang);
        params.experienceDetail = JSON.stringify(this.experienceDetail);
        params.eduDetail = JSON.stringify(this.eduDetail);
        if (valid) {
          updateUser(this.userInfo._id, {
            ...params,
          }).then((res) => {
            if (res.code === 200) {
              this.$message.success("修改成功");
              location.reload();
            }
          });
        }
      });
    },
    deleteEdu(index) {
      this.eduDetail.splice(index, 1);
    },
    addEdu() {
      this.eduDetail.push({
        time: "",
        name: "",
      });
    },
    deleteWork(index) {
      this.experienceDetail.splice(index, 1);
    },
    addWork() {
      this.experienceDetail.push({
        time: "",
        name: "",
      });
    },
  },
};
</script>

<style lang="scss" scoped>
h4 {
  text-align: center;
  font-weight: bold;
  font-size: 20px;
  line-height: 60px;
}
::v-deep .el-upload__input {
  display: none;
}
.avatar {
  width: 60px;
  height: 60px;
  display: block;
}
.img-blocks {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.el-icon-circle-close {
  position: absolute;
  top: -5px;
  right: -5px;
  cursor: pointer;
  color: red;
}
::v-deep .el-upload__input {
  display: none !important;
}

.jobs {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  transition: all .2s linear;
  border-radius: 12px;
  .each-job {
    background: #e9f1f0;
    width: 22%;
    margin-bottom: 10px;
    cursor: pointer;
    .company {
      padding: 10px 20px;
      background: linear-gradient(90deg,#f5fcfc 0,#fcfbfa 100%);
    }
  }

  .each-job:hover {
    position: relative;
    z-index: 1;
    box-shadow: 0 16px 40px 0 rgba(153,153,153,.3);
  }
}
</style>
